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CREATING AND USING BUTTONS 


Using Three-Dimensional Effects 


In this chapter, you will: 
+ Design buttons 
® Work with text in Web graphics 
è Create shapes and paths 
è Create 3-D effects 
è Implement buttons in Web pages 


U nlike other icons, buttons add functionality to Web pages. Imagine a Web 
page in terms of an electronic device: Web icons are like stickers on the 
device, such as those identifying the manufacturer, or those that warn against 
using the product near water. Web buttons are like physical buttons, such as 
the on/off switch. Standard icons provide some information to the user, but 
a button also must encourage an action, such as following a link or submit- 
ting a form. 


You must design buttons that encourage clicking. The most clickable buttons 
imitate the qualities, such as size and shape, of buttons on physical appliances. 
Buttons also should appear to be three-dimensional (3-D). You achieve this 
effect by adding highlights, texture, and shadows, and by rounding the edges 
of the buttons. 


The purpose of a button is often more difficult to express symbolically than 
the purpose of an icon. When symbols are unclear, use text to inform users 


about button functions. This chapter covers the design, creation, and use of 
3-D buttons. 
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DESIGNING BUTTONS 


When designing a button, use a style that matches its importance. Emphasize buttons that 
perform important functions, and de-emphasize others. The best way to de-emphasize a 
button is to not use a graphic with it, and leave it as a simple text link. The best way to 
emphasize a button is to imitate those on actual appliances by rounding corners and sim- 
ulating 3-D effects. 


Understanding Different Types of Buttons 


All buttons prompt the user to perform an action. Usually the action is to follow a 
hyperlink to another page, but a button click also can close a window, submit a form, 
or send a message. You can separate buttons into several thematic categories, including 
site content, site information, and account information. Buttons that are part of the same 
theme should look similar and must be easily distinguished from buttons with different 
themes. For example, imagine a page with the following links: Sign up for FREE 
E-Mail, E-MAIL US, and E-Mail this Page to a Friend. You can represent each link with 
an image of an envelope, as shown in Figure 7-1, but that makes the relative meanings 
unclear. Although additional text in the buttons would explain their functions, the enve- 
lope icon is ambiguous and is what makes the additional text necessary. 


FREE E-Mail 


wen 
i 


— 
L 
E-Mail this Page 


to a Friend 


Figure 7-4 Similar, ambiguous buttons 


Meaningful symbols for these buttons would exploit the differences among them, as 
shown in Figure 7-2. Instead of using the image of an envelope for each button, focus 
on the unique tasks of each function. The first button could use a graphic of a pencil 
filling in a form to suggest the concept of signing up, and the third button could use an 
image of a face to suggest the idea of a friend. 
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Sign up for 
FREE E-Mail! 


Figure 7-2 Unique, unambiguous buttons 


Imagine also that the page contained these additional links: Edit Your Account and Print 
this Page. You could group all five buttons by theme, using similar designs, as shown in 
Figure 7-3. The FREE E-Mail and Edit links both relate to a user account and should 
share a design. Similarly, the E-Mail to a Friend and Print links both relate to manipu- 
lating the page content, and also should share a design. 


Sign upfor Edit your 
FREE E-Mail! Account / == 


Figure 7-3 Buttons with shared themes and designs 


Some examples of different types of links are: 


a Site Information: Links that lead the user to information about the site, such as 
advertising, event calendars, contacts, and privacy policies 


a Navigation: Links that lead the user to the content of the site, such as 
auctions, chat rooms, downloads, news, reviews, and tutorials 


a Account: Links relating to the user’s account on the site, such as editing 
account information, registration, making the page a home page, and 
personalizing the site 


a Page Content: Links that reformat the page or lead to another version of the 
same page, such as Mail this Page to a Friend, Print this Article, Bookmark 
this Page, and Save this Page 


260 


Chapter 7 Creating and Using Buttons 


a Directional: Links that lead to pages related to the current page, such as Home, 
Next, Previous, and Top 


a Media Player: Links that control audio or video players in the page, such as 
Listen, Play, Stop, Reverse, and Fast Forward 


a Functional: Links that manipulate the browser window, such as E-MAIL US, 
Fit Browser to Screen, and Close this Window 


Figure 7-4 shows a conventional Web page layout, often called a C-clamp because the 
navigation and advertisements form the shape of the letter C around the actual content 
in the center of the page. The figure has a black line representing the page fold. In a 
newspaper, the fold is in the center of the paper, where it is folded in half. Important 
news is placed above the fold so that it is seen even when the newspaper is folded. In a 
Web page, the fold is at the bottom of the browser window, where the bottom of the 
page is cut off and the user must scroll to see more. The position of the fold is different 
for every size of monitor, but typically it is about 800 pixels from the top of the page. 


Important information, such as the logo and navigation symbols, must be positioned 
above the fold, so that users see it without having to scroll. Important information is 
more likely to be represented by graphical buttons instead of text links. Less crucial 
information, such as links within content, or obligatory links such as copyright infor- 
mation, tends to be placed below the fold and probably is represented as text links rather 
than as graphical buttons. 


Links surrounding the text (the C part of a C-clamp layout) probably are represented as 
graphical buttons, while the links in the text (the material enclosed by the C) probably 
are left as text links. This design is very conventional. The challenge for all Web design- 
ers is to discover ways of laying out pages that are as clear and navigable as the C-clamp 
design, but are also innovative and interesting. 


As shown in Figure 7-4, links along the top and left of a page usually are buttons, while links 
within the content itself and site information links at the bottom normally are text links. 


There are no conventions about how different types of buttons should look, as long as 
they stay consistent within their types. 


Imitating Physical Buttons 


Users must be able to immediately distinguish between static icons that merely provide 
information and dynamic buttons that perform an action. When Web page text is blue 
and underlined, you immediately know that it is a link. Users should have the same reac- 
tion to the buttons you design—they should know that buttons are links and that icons 
are for information only. 
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Figure 7-4 Positioning of different types of buttons in a conventional page layout 


If it is ambiguous whether a graphic is a standard icon or a button, users waste time 
clicking icons that lead nowhere, or they hunt for a button that is in plain sight but does 
not appear to be clickable. You need to use a convention such as the blue underline to 
cue the reader that a button is a link. The most common convention to make buttons 
look clickable is to simulate 3-D effects on the buttons. Figure 7-5 shows two buttons 
that prompt the user to submit a form. The button on the left is flat, and a user may not 
understand that it should be clicked. The button on the right uses several 3-D cues so 
the reader knows the image is a button, and that clicking it causes an action. 


Highlight 


—— Round shape 


Recessed shading in text 


go 


Figure 7-5 A flat button and a 3-D button 


Shading 


Drop shadow 
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In the case of buttons, three-dimensionality is a cue both on the Web and in everyday 
life. This is especially true for media player software buttons, whose actual functions 
mimic those on devices such as CD players. Make the Play button in a Web-based music 
application resemble the Play button on an actual CD player, as in Figure 7-6, and the 
reader knows immediately what the button does. 


Figure 7-6 Media buttons 


Designing a Tabbed Interface 


A common problem for site architects is fitting all of a site’s links in one navigation bar. 
The simplest solution is to put them together in a list, as in Figure 7-7. To do so, you 
place the navigation bar on the side, because the top of the page cannot accommodate 
more than five or six buttons, and most sites have dozens of links in the navigation area. 
However, a side navigation bar overwhelms the reader with choices, and many links get 
lost below the fold and are not visible until the reader scrolls down. 


Figure 7-7 Side navigation bar 


If you use a hierarchical, or nested, menu in the navigation bar, as shown in Figure 7-8, 
you avoid presenting too many choices. The menu in Figure 7-8 includes only four or 
five categories, which expand into more topics when you select a category. The draw- 
back to this approach is that it usually requires lots of extra HTML or special coding in 
Java or JavaScript. 
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Figure 7-8 Hierarchical menu on the side 


In a tabbed interface, as the user clicks each tab, submenu links appear below the tab, 
as shown in Figure 7-9. The tabbed interface is a relatively new convention for site nav- 
igation, but it is already used on most major Web sites. It allows designers to move navi- 
gation bars from the left side of the page to the top, and frees up more page width for 
content. You also can create a tabbed interface entirely with HTML, without additional 
client-side programming. The tabbed interface also is a type of hierarchical menu system. 


Figure 7-9 Hierarchical menu on the top 


Each tab serves as a button, and often does not use 3-D effects, because its purpose is 
clear without the additional cues. The design of the navigation tabs is simple; rounded 
corners reinforce the association with actual file folders. 


Tabbed interfaces require at least two versions for each tab: one for the tab when it links 
to the current page, and one when it links to another page. Incidentally, using two ver- 
sions also is popular for buttons on side navigation bars. All buttons appear in their 
default state, but when you click a button, a new page appears with the button in a dif- 
ferent state. 


To emphasize the selected tab, draw it to create the illusion that it overlaps the adjacent 
tabs, as shown in Figure 7-10. Use a brighter color than the other tabs to reinforce the 
impression that the tab is in the foreground. 


Figure 7-10 Tabbed interface 
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Rollover Effects 


Readers need cues to know that clicking a button causes an action. In addition to 3-D 
shading, rounded corners, and simple text instructions, many designers use rollover 
effects, which call attention to a button and signify it as a link. Your Data Disk includes 
an example of a button with rollover effects. 


To view a button with rollover effects: 
1. In a Web browser, open the file named rollover.html. 
2. Move the pointer over the image to see one type of rollover effect. 
3. Click the image to see another type of rollover effect. 


Although often overused as a design element, rollovers can add interest to a page and 
make it feel more interactive. You can create rollover effects with JavaScript or style 
sheets, and most WYSIWYG HTML editors generate the code for you. This book ded- 
icates an entire chapter to rollover effects. 


Deciding Between Text and Graphics for Buttons 


You can use a button to represent any link on a page. In fact, you could use buttons to 
represent every link on a page, but it would be time-consuming and ineffective because 
most of your links would be overemphasized. If every link competes for the reader’s 
attention, the site looks too busy, and it’s unclear which links are most important. Links 
that appear in the content area of Web pages almost always are left as regular text links. 
These links receive enough emphasis with standard underlining and color differences. 


Good candidates for text links are links to obligatory information and links that cannot 
be represented by graphics. Links to information about the site, such as About Us or 
Privacy Policy, usually are de-emphasized. These links connect to information the site 
must provide, and usually appear at the bottom of pages as simple text links. Some con- 
cepts, such as logging off a network, are difficult to represent with a graphic, and there- 
fore need text to make their purpose clear. If a link requires text for clarity, you save 
bandwidth by not using a button. 


You can represent other types of links as either text or buttons. For example, you could 
represent the Next button on a multipage article with an arrow or with the word Next. 
Before you make decisions about these links, you must determine the overall page 
design. You will design some pages to be lean, and use colored tables coded in HTML 
instead of graphics. A lean design is appropriate for technical sites that simply convey 
information quickly. You will design other pages, such as those on entertainment sites, 
to be very rich, with lots of graphics. Most pages fall between these two extremes and 
use a mix of text and graphical links. 


You can display text in Web pages only with fonts that are installed on the user’s com- 
puter. When using fonts in a graphic, however, you can select from the fonts on your 
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own computer. If you want to use a nonstandard font in a Web page, placing text in 
graphics is sometimes the only way to guarantee that your chosen font will appear. 


Graphical buttons with clear, well-designed images provide meaning and create visual 
interest on a Web page. They also work well with international audiences. Most users 
correctly interpret a button with an arrow to be a link to the next page. However, they 
might not be able to interpret the words “Next Page” in a text link. Links that need 
emphasis also can attract more attention if you represent them as buttons. In general, use 
buttons as links when it suits the overall design of the site, to add visual interest and 
emphasis, and to provide universal meaning. 


WORKING WITH TEXT 


Most buttons use text to describe their function. You add text to graphics in Photoshop 
with the Type tool. In older versions of Photoshop you add the text in a separate win- 
dow, but in newer versions you type directly over the image. 


In Photoshop, click an image with the Type tool to open a new layer that appears in the 
Layers palette. A “T” appears in the Layer thumbnail area, as shown in Figure 7-11, and 
indicates that it is a type layer. A type layer contains active, unrendered text. You must 
render, or rasterize, the type layer before you can apply filters or other effects. Once 
you render the type layer, you can no longer edit the text. Until the type is rasterized, 
the text is treated as vector information, so you can modify it. You can add text to an 
image, and then apply different settings to the text to see how it looks with the rest of 
the image. 


[orma Opacity: fioo E) 


F Preserve Transparency 


Figure 7-11 A type layer 


To add text to an image: 
1. In Photoshop, create an image. 


2. Click the Type tool and set the options in the Options bar to Create a text 
layer. Set the foreground color to black. 


3. Click the image and type the text you want, such as Next Page. 
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4. Click the text and change the font, size, and color. 


5. When you finish editing, click Layer in the menu bar, click Rasterize, and 
then click Type. 


The Options bar when the Type tool is selected is shown in Figure 7-12. 


Normal text 
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farian X j| [Regular X | wT fp pt ka j| 


Vertical type 
Type Mask 


Type Warp 
Open Character and Paragraph palettes 


E| raves | | 


==>) mi 


Figure 7-12 Type tool options 


Setting Type Options 


The type options in Photoshop are similar to those in any word-processing program. 
Photoshop 6 includes separate Character and Paragraph palettes, shown in Figure 7-13, 
to adjust kerning, leading, and other text settings. Most text options apply only to several 
lines of text, such as a paragraph. Most Web graphics use only individual words or phrases. 
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Figure 7-13 Character and Paragraph palettes 


Some options in the Character palette are useful when you design buttons. Kerning and 
tracking refer to the distance between characters. Use these options to squeeze text into 
a small space or stretch it to fit a larger space. Similarly, leading controls the spacing 
between lines of text. You can adjust leading to fit multiple lines of text in a given space, 
although few buttons have more than one line of text. Examples of leading and track- 
ing are shown in Figure 7-14. 


Working with Text 267 


27 point Times 
with default options 


With Tad 14 
27 point Times 
with Leading of 40 


27 point Times 
with Tracking of-100 


27 point Times 
with Tracking of 100 


Figure 7-14 Type leading and tracking 


You can set most fonts to regular, bold, italic (oblique), or bold italic. The following 
“Selecting a Font” section provides more information about text fonts on buttons. 


The Anti-Alias option allows you to control the smoothness of the text. Selecting None 
gives the text a jagged edge, which can be useful if you are using transparency. Because the 
text in buttons almost always appears on a nontransparent background, you should use 
another anti-aliasing option, such as the Smooth option, which produces the best results. 


Selecting a Font 


Buttons usually are only as large as necessary. Therefore, you need to make button text 
as small as possible, yet still keep it legible. To do so, you choose between serif and sans 
serif fonts, select text attributes, and set the type size. Serifs are short lines or small addi- 
tions to the ends of letters. Serifs help differentiate letters and font types. Sans serif fonts 
do not include serifs in their letters (Sans is French for without.) Some serif fonts are 
New York and Times Roman; some sans serif fonts are Arial and Helvetica. Serif and 
sans serif fonts are illustrated in Figure 7-15. 


Serif fonts 
| y Sans serif fonts 
Bookman Arial 
Courier Helvetica 


Garamond QuickType 
Times Verdana 


Figure 7-15 Examples of serif and sans serif fonts 
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To understand how serifs are useful, look at the words in Figure 7-16. Without serifs, 
the letters cl appear to be a d when the tracking is reduced. In the serif font the letters 
are easier to distinguish and the word is clearly legible. 


dock 


clock 


Figure 7-16 Differences between serif and sans serif fonts with reduced tracking 


Serifs work well in print, where the resolution of ink molecules on paper is effectively 
millions of dots per inch. On computer screens, however, the resolution is too low to 
make serifs enhance the readability of text. In fact serif text on a computer screen is 
often less readable than sans serif text. Therefore, most Web pages use fonts such as Arial 
and Helvetica for body text and other small text; for variety they use fonts such as Times 
for headlines and other large text. Most print media, in contrast, use sans serif type for 
headlines and serif type for body text. 


Just as serif text is more difficult to read on computer screens, so is italicized text, espe- 
cially at small sizes. See Figure 7-17 for an example. Buttons normally use small text, so 
select a font that is easy to read, nonitalic, and sans serif. Use italics only in buttons with 
larger text. The most legible text is lowercase with the first letter of each word capital- 
ized. Avoid all-uppercase or all-lowercase words. 


Normal size 
Doubled in size 


clock <4— Sans serif regular 


pi clack Sans serif italic 


clock 


clock 
clock + Serif regular 
clock 


clock Serif italic 


Figure 7-17 Serif and sans serif fonts as they appear on a computer screen 


Bold formatting increases the width of letters, so you may want to reduce the kerning 
on boldface text to keep the overall width within an acceptable range. A new sans serif 
font, Verdana, was developed for the Web, and is especially easy to read because its let- 
ters are wider than those in Arial and Helvetica. However, using Verdana may require 
wider buttons than you want, or you might have to reduce the font size to fit the text 
in the button. In general, avoid using Verdana for buttons, or reduce kerning to help fit 
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the text. Figure 7-18 shows four lines of text; although all have the same point size, they 
have quite different widths. 


abcdefghijk <—- Arial regular 
abcdefghijk <—— Arial bold 
abcd efg h ij k <—— Verdana regular 
abcdefghijk+ verdana bold 


Figure 7-18 Varying widths of sans serif fonts 


Setting the Type Size 


By default, type size is measured in points. You must adjust Preferences to use pixels as 
the type size unit in Photoshop. 


To set type size units in Photoshop: 


1. Click Edit in the menu bar, point to Preferences, and then click Units & 
Rulers. 


The Units & Rulers Preferences dialog box opens. 


2. Select pixels (or millimeters) for the type units. 


Warping the Text 


Another new feature in Photoshop 6 is the ability to warp text. Warped text is effective 
for use as distorted text. Text can be warped only before it has been rendered. 


To warp text in Photoshop: 
1. Create an image and add text using the Type tool. Select the text. 


2. Click the Create Warped Text button in the Options bar, and select a style 
and direction. 


3. Modify the effect with the other three slider bars. 
4. Click OK to see the warped text. 


5. Select the text with the Type tool and warp it again with a different setting. 
Text can be warped using only one setting. 


Even after the text is distorted, you still can edit it. The warping feature works better in 
logos and larger types of Web graphics than in buttons. Buttons usually do not have 
room for distorted text, so use this option sparingly. 


270 


Chapter 7 Creating and Using Buttons 


Using the Type Mask Tool 


The left part of the Options bar includes buttons that set the Type tool to create either a 
text layer or a type mask. The Type Mask tool creates a selection area in the shape of text, 
rather than normal, colored text. This tool is used to create visual effects with the text 
outline when the background has a color or texture. For example, you can boost or 
reduce the contrast or run a filter, and make the changes occur only within the type mask. 


Unlike regular type, you do not have to render the type mask before applying filters or 
other effects. The word “mask” is used often in Photoshop, and refers to the area out- 
side a selection. A mask lets you protect areas where you apply effects such as filters. The 
area you do not select is masked, or protected from editing. 


Photoshop also includes the Vertical Type tools, which work like the other type tools, 
except that the resulting text runs from the top to the bottom of the page or area, instead 
of from left to right. 


To create a selection using the Type Mask tool: 


1. Create a new image. Select the Type tool and click the Create a mask or 
selection button in the Options bar. 


2. Click the Vertically orient text button to have the text read down rather 
than across. 


3. Click the image and type the text you want. The image temporarily changes 
color as you add text. 


4. When you finish, click the Commit any current edits (check mark) but- 
ton in the Options bar to commit the edits, or select another tool from the 
toolbox. You should see a selection area in the shape of the text you added. 
You cannot edit this as you would normal text. 


5. Select the Paintbrush tool and set the brush to one of the spatter brush 
heads. Use black as the foreground color and daub the pointer on each letter. 


6. Deselect the selection area to see your text. 


CREATING SHAPES AND PATHS 


Traditionally, graphics software worked exclusively with either bitmap images or vector 
images, but not both. Recently, however, these programs are converging. Photoshop 6 
and other new image-editing tools now include vector tools in addition to their bitmap 
tools. You no longer have to use programs such as Adobe Illustrator or FreeHand to cre- 
ate vector images; you can now do so directly in Photoshop. 


The vector tools in Photoshop work with paths, which are vectors with a different name. 
Paths are made up of anchor points connected by straight or curved lines. Paths are used 
only to guide you in creating shapes and selection areas; they are not part of the finished 
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image. When a path forms a complete loop, it is called a shape. Shapes are similar to 
selection areas, but are easier to edit and give you more precise control. Unlike selec- 
tions, you can save paths and shapes with an image in most common formats, including 
GIF and JPEG. The path information can be understood even by some vector-based 
graphics software such as Adobe Illustrator. 


Creating Shapes 


To simulate physical-world buttons, you often want to create round buttons or rectan- 
gular buttons with rounded corners. Older versions of Photoshop had tools to create 
ellipses and rectangles, but did not let you directly create polygonal shapes or rectangles 
with rounded corners. To make complex shapes, you had to combine elliptical and rec- 
tangular selection areas. Photoshop 6 now includes separate tools to create these shapes. 
If you use an older version of Photoshop or another image editor, you need to use a dif- 
ferent method to create rounded corners. 


The most recent version of Photoshop includes a new tool called the Shape tool. This 
tool makes shapes much easier to create than they were in previous versions of 
Photoshop. You can create rectangles, circles, rounded rectangles, and polygons, as well 
as more complicated shapes. Just as you preview layers in the Layers palette and view the 
different channels and masks in the Channels palette, you can view paths and shapes in 
the Paths palette. Keep this palette open as you create and edit shapes and other paths. 
Figure 7-19 shows the Paths palette. 


gi Star.tif @ ... EES 
o ToC 


50 


Figure 7-19 The Paths palette 


When creating a path, you can choose whether to create a clipping path or a work 
path. A work path is a temporary path in an existing layer, and is discarded after use. 
A clipping path is created in a new layer of its own and is more appropriate for cre- 
ating buttons. When you click the Create a New Shape Layer button in the Options 
bar, a Layer Style menu appears with many preset layer styles. This option lets you cre- 
ate clipping paths with several options for buttons. 


Creating Squares and Circles 


The Rectangle and Ellipse shape tools work like the Rectangular and Elliptical Marquee 
tools. Use the Marquee tools to create a rectangular or elliptical selection area around pixels. 
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Use the Shape tools to create a rectangular or elliptical path over the image. You convert the 
path to a selection by clicking the Loads path as a selection button at the bottom of the Paths 
palette. You also can convert a selection to a path by clicking the Makes work path from a 
Selection button. Combining shapes is the same as combining selection areas—each addi- 
tional shape adds, subtracts, or intersects with the existing shapes, depending on which option 
you select from the Options bar. Unlike selections, you also can combine shapes to exclude 
only the intersection of the new and existing shapes. 


While Marquee tools require using the Shift, Control, and Option (or Alt in Windows) 
keys to control parameters such as aspect ratio, you control Shape tool settings with 
menu selections in the Options bar. There you can force specific sizes or ratios, and 
determine whether to draw the shape from the center or from the upper-left corner. 


Creating Rounded Rectangles 


Photoshop 6 offers graphic artists an easy way to create rounded rectangles. Unlike the 
Rectangle tool, the Rounded Rectangle tool has a Radius option. This value indicates 
the amount of curvature in each corner of the shape. Think of a rounded rectangle as 
having four circles that define each corner of a rectangle. The radius of the curve in each 
corner is the same as the radius of each circle. 


To create a rectangle with round corners in Photoshop: 
1. Create an image. 


2. Select the Rounded Rectangle tool. (This is different from the Rounded 
Rectangle Marquee tool in ImageR eady.) 


. In the Options bar, set the Radius to 10 pixels. 
. Drag the pointer over the image to create a rounded rectangle. 


. Set the radius to 30 pixels. 


Nn Ow A W 


. Create another rounded rectangle. Note how the curvature of the corners 
in the second rectangle differs from the first. 


Creating Polygons 


You also can use the Shape tool to create polygons, which are shapes with many sides. 
You can use the Polygon option to create triangles, stars, octagons, and other shapes. You 
control the exact shape of the polygon by setting the following options: 


ma Sides: Set the number of sides. Five-point stars and pentagons both are con- 
sidered to have five sides, although the star actually has 10. 


a Radius: Set the distance from the center of a polygon to its outermost corners. 


a Snap to Pixels: Force the shape around the gridwork of pixels. Paths normally 
ignore the pixels in an image and only snap to pixels when the path is con- 
verted to a selection. 
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a Smooth Corners: Round the points of the polygon. 
= Smooth Indents: Round the interior corners of stars. 


a Indent Sides: Draw the polygon as a star. The percentage value sets the size of 
each point; larger percentages create thinner, sharper points, while smaller 
percentages create thicker points. 


Editing Shapes 


Once you have created a shape, you can move or modify it. You can use the Move tool 
to move a selection and its contents, or use one of the Marquee tools to move just the 
selection. To move shapes, you can use the Path Component Selection tool in the tool- 
box, as shown in Figure 7-20.When the shape is a clipping path, the contents are moved 
with the path; when the shape is a work path, only the path itself is moved. 


Figure 7-20 The Path Component Selection tool and Direct Selection tool 


You use the Direct Selection tool to modify the positions of the anchor points that 
define the path and shape. With this tool, you can drag the anchor point to a new posi- 
tion. Normal anchor points are defined by their position, which indicate the vertex of 
the angle formed by two joined line segments, as shown in Figure 7-21. 


Figure 7-21 Anchor points in a vector path 
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The Pen tools also allow you to manipulate the anchors of a path. Using different vari- 
ations, you can add and delete anchor points from a path to make it less or more smooth, 
and you can convert anchor points from curves to straight angles. 


Combining Shapes 


In Photoshop and ImageReady, you can combine selection areas and vector paths in dif- 
ferent ways. Once you have created at least one shape, the Options bar displays buttons 
allowing you to add, subtract, intersect, or exclude overlapping areas. Figure 7-22 shows 
these buttons in the Options bar. 


Add 
Subtract 


Intersect 


Exclude 


ceea (COSINE | 4) i 


Figure 7-22 Controls for combining shapes 


The buttons also determine how a new shape interacts with existing shapes. This is use- 
ful for creating complex shapes. Figure 7-23 shows the possible ways of combining 
shapes or selection areas; those ways are listed below: 


m Add: Create a shape, or add one shape to another. 
m Subtract: A new shape removes area from an existing shape. 
a Intersect: The working area is the area overlapped by both shapes. 


a Exclude: The working area is the area of the second shape not covered by the 
first shape. 
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Shape 2 added to Shape 1 


<+———_ Shape 2 subtracted from Shape 1 


Shape 2 intersected with Shape 1 


<+——_ Shape 2 excluded from Shape 1 


Figure 7-23 Possible ways to combine shapes 


Creating Custom Shapes 


Just as you can create custom brushes, which are essentially customized selection areas, 
you can create custom shapes. Use the Pen tool or any of the Shape tools to create a 
shape and edit it by adjusting the anchor points. When you finish, select the path, click 
Edit on the menu bar, and then click Define Custom Shape. Next, you set options for 
the new shape: 


Defined Size: The shape is always drawn with an exact width and height. 


Defined Proportions: The width and height of the shape can vary, but the aspect 
ratio remains the same. 


Unconstrained: The default setting; the shape is drawn without a set width and 
height. 


From Center: Force drawing the shape from the center. Otherwise, the default 
is to start drawing the shape from the upper-left. 
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You then can select custom shapes by clicking the Custom Shape icon in the Options 
bar or the tool palette. Click the inverted arrow next to the shape and choose a shape 
from the palette that appears. 


Working with Shapes 


Once you have defined a shape, you can convert it to a selection area and use the selec- 
tion to create the rest of your image. You also can use the shape itself to color pixels in 
the image and add styles and effects. You can quickly switch between selections and 
shapes by clicking the icons at the bottom of the Paths palette. Be careful when you have 
a selection area and a path selected at the same time; if you move or delete one of them, 
Photoshop might move or delete the other. 


The two easiest uses for shapes are to fill or stroke an area, as you would with a selec- 
tion area. Filling a shape uses the foreground color to fill the path. When you stroke a 
shape, the path is outlined with a one-pixel line. Figure 7-24 shows the difference 
between these options. 


Filled shape 


Stroked shape 
Figure 7-24 Using Fill and Stroke 


CREATING 3-D EFFECTS 


Because Web pages and graphics always appear on two-dimensional surfaces, you obvi- 
ously cannot create true three-dimensional objects. You can easily create the illusion of 
3-D, however, by using the principle that light almost always illuminates from above. 
Therefore, light consistently produces highlights on the upper surfaces of objects and 
creates shadows below them. 


You can imitate this natural effect. Place highlights at the tops of objects in an image, and 
they appear to extend away from the rest of the page. Place shadows at the bottoms of 
objects in an image, and they appear to recede. You can reverse the illusion by inverting 
the shadows and highlights. If you turn this book upside down, the images in Figure 7-25 
seem to reverse direction. 
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Highlights above and a shadow below simulate 
a raised figure 


+ Shadows above simulate an indented figure 


Figure 7-25 3-D effects 


Using the Z-Axis 


According to Cartesian coordinates, horizontal distances are measured along the x-axis, 
and vertical distances are measured along the y-axis. The height and width of images and 
their positions on Web pages often are measured in terms of x and y. This x-y coordi- 
nate system is the standard two-dimensional model used in all graphical interfaces. 


Three-dimensional tools refer to another dimension that is perpendicular to the x- and 
y-axes. This third dimension is called the z-axis, and is used to measure the virtual dis- 
tance between an image and the baseline surface of the rest of the field. In the left- 
handed coordinate system, a positive z value means the object is behind the screen, while 
a negative z value means the object is in front of the screen. In a right-handed system 
the reverse is true. Figure 7-26 shows the three main axes of the 3-D coordinate system. 


Left-handed coordinate 
system 


Right-handed coordinate 
system 


Y+ 


i eee r men pa 
l Positive | || Negative l 
z-axis z-axis 


Negative Y: [Y-] Positive 
z-axis z-axis 


Figure 7-26 The 3-D coordinate system 
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Keeping the Light Consistent 


Because light shines from above in the natural world, you see button highlights as point- 
ing toward the virtual light source and shadows as pointing away. The highlights and 
shadows must be opposite each other to reinforce the illusion of light. When they do 
not match, as shown in Figure 7-27, the illusion is disturbed. Although the effect is prob- 
ably not ruined altogether, mismatched shadows and highlights can distract the reader. 


The convention is to use light not only from above, but also angled from the side. This 
technique adds more highlights and shadows on the sides of graphics, and increases the 
3-D illusion. The angle can be from either side, but usually is from the upper-left, caus- 
ing highlights on the upper-left side of the graphic and shadows on the lower-right. 


Both highlight and The highlight 

shadow suggesta suggests a light 

light source from the source from the 

upper-left upper-right, while 
the shadow suggests 
a light source from 
the upper-left 


Figure 7-27 Matched and mismatched lighting effects 


Using Beveled Edges 


The most common 3-D effect is the beveled edge, which is a slanted or inclined edge. 
This effect is used on most icons and windows in graphical interfaces, and in standard desk- 
top operating systems. To create the illusion of beveled edges, you add a highlight to the 
upper edge and left side of the image, and add a shadow to the lower edge and right side. 
See Figure 7-28 for examples. You can use any of the painting tools to create this effect, 
or you can use the Burn tool for the shadows and the Dodge tool for the highlights. 


Figure 7-28 Hard and soft beveled edges 
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Using Gradients 


Gradients are one of the more useful Web graphics effects, and they quickly add a pro- 
fessional polish. Gradients are smooth transitions from one color to another. The draw- 
back of gradients is that they require a large color palette, which results in larger files. 


In Photoshop, the gradient tools include the Linear Gradient tool, the Radial Gradient 
tool, the Angle Gradient tool, the Reflected Gradient tool, and the Diamond Gradient 
tool. Figure 7-29 illustrates these gradients, using white as the foreground color and 
black as the background color. 


Each tool works in a similar way, creating a graduated color shift between two or more 
colors. The difference between the tools is in the shapes they create. 


Linear gradient 


Radial gradient 


Angle gradient 


Reflected gradient 


Diamond gradient 


Figure 7-29 Five types of gradients 
a The Linear Gradient tool: This tool creates a simple transition from one color 
to another in one direction. 


a The Radial Gradient tool: This tool creates a point of one color that radiates in 
all directions as it shifts to other colors. 


a The Angle Gradient tool: This tool creates a circular gradation from one color 
to another around a central point. 


a The Reflected Gradient tool: This tool creates a linear gradation from one color 
to another, then back to the first color. 


a The Diamond Gradient tool: This tool is similar to the Radial Gradient tool, 
but creates diamond shapes as it shifts from one color to another. 
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The gradient tools replace all selected pixels with the gradient, so make your selection 
carefully, or use the gradient tools in an empty layer. The tools share the same options 
in the Options palette. In addition to Mode and Opacity, you can control which colors 
are used in the gradation. The default selection of Foreground to Background causes the 
gradient to use the foreground and background colors as end points. The Foreground 
to Transparent gradient fades from the foreground color to completely transparent, 
which is useful for adding subtle shading to images. Photoshop includes several other 
preset gradients and allows you to create your own. 


Using a Drop Shadow 


A drop shadow creates the illusion that a button is hovering above the rest of the page. 
Notice in Figure 7-30 how a stronger drop shadow causes the boxes to seem to be lifted 
off the page. 


Figure 7-30 Drop Shadows 


Drop shadows are more convincing when they fade into the background, but faded 
edges make it more difficult to use transparent backgrounds. When using drop shadows, 
make sure to use the same background color for the button and the page. When used 
within a button, drop shadows create the illusion that the selection is carved out of the 
rest of the button. 


You can create a drop shadow by painting with a dark color around the button. Another 
option is to copy the button to a new layer. 


To create a drop shadow by copying a layer: 
1. Duplicate the layer containing the button image. 
2. Move the lower layer five to 10 pixels down and to the side. 


3. Darken and blur the colors of the lower layer to simulate shading. 
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Photoshop and ImageReady automate this technique with the Drop Shadow effect, 
which is one of several automated layer styles. 


To use styles to create a drop shadow effect: 
1. Select the layer containing the button image. 


2. Click the Add a layer style button at the bottom of the Layers palette and 
then click Drop Shadow. You also can click Layer on the menu bar, point 
to Layer Style, and then click Drop Shadow. 


3. In the Layer Style dialog box, shown in Figure 7-31, adjust the various 
options or use the defaults. 


4. Click OK. You should see a style icon in the affected layer. Any edits you 
make to this layer will adopt the same style. 


Layer Style 


(Drop Shadow 


bm bed bodes bond Foal a fd had E bt 


Figure 7-314 The Layer Style dialog box 


The Drop Shadow effect offers several parameters to adjust the darkness and softness of 
the shadow, but the default settings are generally best. A similar effect is the Outer Glow, 
which uses a light color as a shadow. This effect is useful for buttons that appear over 
dark backgrounds. 


Using Layer Styles 


Layer Styles allow you to add several effects to any layer in your image. Unlike other fil- 
ters, the effects are applied to the entire layer rather than to the selected area. You can 
use multiple effects at the same time, and you can turn the effects on and off as long as 
the layer is separate. The effects are permanently set when you flatten the layers; 
Photoshop finds the transparent areas in the layer and applies the effects to the edge 
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between transparent and opaque areas. You can see the effects of using Layer Styles in 
Figure 7-32. 

The effects that help you create 3-D buttons are the Drop Shadow, Inner Shadow, Inner 
and Outer Glow, and Bevel and Emboss. For each effect, you can adjust the Mode, the 
Opacity, the angle of the simulated light source, the distance along the z-axis, the blur, 
and the intensity. 


¢ Drop Shadow 


l- Inner Shadow 


Outer Glow 


ke- Inner Glow 


le- Inner Bevel 


l- Pillow Emboss 


A 


Figure 7-32 Using Layer Styles 


All layer effects use the global angle, which is a standard angle for simulated light. When 
you set the global angle, all effects use the same angle. In Photoshop, angles are measured 
counterclockwise starting from the rightmost point on a circle (3:00 on a clock face). 
The standard global angle is from the upper-left at 120 degrees. Using a different angle 
can cause reverse shading and highlighting. In particular, an angle of 120 degrees with 
the Inner Shadow effect causes the image area to appear to recede, while an angle of -50 
degrees causes the styled (or affected) area to pop out of the image. 


Using 3-D Software 


Until the mid-1990s, creating quality 3-D graphics required expensive software on high- 
end computers such as Silicon Graphics workstations. Now many 3-D software packages 
are available for desktop computers. These programs tend to be more difficult to learn 


Implementing Buttons in Web Pages 283 


than other graphics software, and understanding them in depth requires an entire course 
or sequence of courses. These tools are more appropriate for video and animation projects, 
and provide an abundance of features to produce images for the Web. You can use basic 
Photoshop tools to produce all the 3-D effects you need for most Web graphics. 


Using Distort Filters in Photoshop 


Photoshop and most other image editors include various distortion filters that create 
3-D effects by making images appear to move in and out of the z-axis. Most of these 
filters are not appropriate for creating buttons, but they still are useful for creating 3-D 
effects in other graphics. The Pinch filter pulls a point out of the image and pushes it in 
or pulls it out along the z-axis. The Spherize filter is similar, but creates a more rounded 
effect. The ZigZag filter is like the Spherize filter but creates ripples like those in water. 


You can see examples of these effects in Figure 7-33. 
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4<— The Spherize filter 


4<— The ZigZag filter 


Figure 7-33 Three distort filters 


IMPLEMENTING BUTTONS IN WEB PAGES 


Just as buttons can be divided into several thematic categories, you also can divide them 
into four functional categories: simple links, form submission buttons, those that control 
media within a page, and those that open or close windows. While the thematic cate- 
gories affect the design of the buttons, the functional categories affect how you place 
the buttons in Web pages. 


Using a Graphic for a Link 


Buttons themselves contain nothing that links to something else. The link is coded in 
the anchor tag that surrounds the button. For example, the following code creates a text 
link to a page called next.html, using the word continue as the link: 


<a href="next.html">continue</a> 
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The following code, however, creates a button that links to next.html. Note that the 
anchor tag is identical in both examples, but the example below uses an image instead 
of the word continue: 


<a href="next.html"><img src="continue.gif" alt="Continue" 
width="103" height="28"></a> 


The only modification you need to make to the IMG tag is in the BORDER attribute. 
By default, when an image is enclosed in an anchor tag, the browser displays the image 
with a border of the same color as the link color, usually blue. Notice in Figure 7-34 
that the graphic appears with a blue line around it. Although the border is an effective 
cue that the image is a link, most designers choose to remove it. To remove the border, 
add the BORDER attribute to the IMG tag and set its value to 0: 


<a href="next.html"><img src="continue.gif" alt="Continue" 
border="0" width="103" height="28"></a> 


continue 


Figure 7-34 Text and button links 


Using a Tabbed Interface 


Tabs are usually implemented in a tabbed interface by the producer rather than the 
designer, but you are expected to slice the image into its component parts. A design 
example for a tabbed interface is shown in Figure 7-35. Each of the three rows must 
appear at the top of a different page. To make each tab have a different link, you could 
use an image map, which we cover in the “Creating Splash Screens” chapter, or chop 
the tabs into separate buttons. 


Figure 7-35 A design for a tabbed interface 


Implementing Buttons in Web Pages 285 


Slicing tabs for a navigation bar can be more difficult than it seems. If the tabs you 
designed overlap at all, you cannot slice the graphics between the tabs. If you try, the 
tabs will be mismatched. One solution is to design three or even four versions of each 
tab, and have each tab contain a bit of the neighboring tabs. Figure 7-36 shows the four 
versions of the Reviews button that would be necessary to avoid mismatched tabs. 


Figure 7-36 Multiple versions of a tab button 


You also can create just two versions of each tab, and create spacers to be placed between 
each tab. Figure 7-37 shows the two necessary versions for each tab, as well as the spacer 
images that go between the tabs. 


Figure 7-37 Two versions of each tab with spacers 


When you place these graphics in a table, make sure that the TABLE tag has its sizing 
attributes set to 0. The following HTML code produces the layout in Figure 7-38: 


<table> 

<tr> 

<td> 

<img src="homel.gif"> 
</td> 

<td> 

<img src="btwn2.gif"> 
</td> 

<td> 

<img src="reviews2.gif"> 
</td> 

<td> 

<img src="btwnl.gif"> 
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</td> 

<td> 

<img src="downloadsl.gif"> 
</td> 

</tr> 

</table> 


Figure 7-38 Tabbed interface with default table attributes 


You must set the CELLSPACING, CELLPADDING, and BORDER attributes to 0. 
Additionally, you must remove all white space between the IMG tags and the sur- 
rounding TD tags. Many WYSIWYG HTML editors miss this step, so you may have to 
edit the white space by hand. 


The following HTML produces the layout in Figure 7-39: 


<table cellspacing="0" cell padding="0" borders "0"><tr> 
<td><img src="homel.gif"></td> 

<td><img src="btwn2.gif"></td> 

<td><img src="reviews2.gif"></td> 

<td><img src="btwnl.gif"></td> 

<td><img src="downloads1.gif"></td> 

</tr></table> 


Figure 7-39 Tabbed interface with flush table cells 


Using a Graphic for the Submit Button 


All forms require a Submit button. Whether it is a simple log-on box or a complex sur- 
vey, you must include a button that allows users to send the form data to a server. The 
default Submit button is gray, beveled, has rounded corners, and contains a word (usu- 
ally Submit). You can use HTML to specify which word appears in this button, but you 
cannot control the shape, size, or color. 


The following HTML code creates the form in Figure 7-40: 


<form method="post" action="/cgi-bin/join.cgi"> 

<input type="text" name="E-mail Address" value="my@e-mail" 
size="10"> 

<br><br> 

<input type="submit" value="Join Now!"> 

</form> 
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The INPUT tag is used to define most form elements. When you set the TYPE attribute 
to “submit,” the browser displays a standard gray button. This button displays Submit or 
Submit Query unless you set the VALUE attribute to display specific text. 


frye email 
Join Now! | 


Figure 7-40 A basic form with default submit button 


You can replace these gray Submit buttons with graphics that you create. This procedure 
does not require using style sheets and is supported by all modern browsers. To use a 
graphic as a Form Submit button, use an INPUT tag, but set the TYPE to “image” 
instead of “submit.” The browser will replace the standard gray button with an image. 


You must indicate which button to use with the SRC attribute, and just as with a nor- 
mal IMG tag, you should set the HEIGHT and WIDTH attributes, and the BORDER 
attribute to 0. 


The following HTML code creates the form in Figure 7-41: 


<form method="post" action="/cgi-bin/join.cgi"> 

<input type="text" name="E-mail_Address" value="my@e-mail" 
size="10"> 

<br><br> 

<input type="image" src="join.gif" width="100" height="19" 
border="0"> 

</form> 


[oye email 


Figure 7-41 A basic form with graphical submit button 


Using Buttons for Other Functions 


You can use buttons to control audio and video players in Web pages, as well as open 
and close windows. The functionality of these buttons comes from client-side scripting 
such as JavaScript, not from the buttons themselves. 


Regardless of its purpose, a button is displayed using an IMG tag, as you have seen in 
previous examples. The surrounding anchor tag contains the extra coding. 
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CHAPTER SUMMARY 


o 


You can create several types of buttons, but you should design buttons of the 
same type within individual pages so that they look similar. 


Buttons must indicate that clicking them causes the browser to perform an 
action. The best way to achieve this effect is to make the buttons resemble 
physical, three-dimensional buttons. 


Links that need emphasis attract more attention if you represent them as but- 
tons. Links that do not need emphasis should remain as text. 


Using text in an image editor is similar to using text in a word processor. 


Usually you create buttons as circles or rectangles with rounded corners. To do 
so in Photoshop, you use a variety of Shape tools. 


Shapes are made of paths and can be converted to or from selection areas. 


You create 3-D effects by simulating a light source above the button. Make the 
button appear to have highlights at the top and shadows below it. 


You can simulate light and shadow by beveling edges, using gradients, and by 
adding drop shadows. 


To make a button clickable, wrap the IMG tag with an anchor tag. 


Form submissions use a gray button by default. You can set a form to use your 
own graphics as submit buttons. 


REVIEW QUESTIONS 


1. What two types of links can you best represent as buttons? 


a. Site information 


b. Account information 


c. Media player 


d. Directional 


2. Which pair of buttons should share a similar design? 


a. 


Contact Us and Mail This Page to a Friend 


b. Log In and Log Out 


C. 


Home and News 


d. Help and Next Page 
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. Which of the following is not a cue to tell the reader that a button is clickable? 
a. 3-D effects 

b. Rollover effects 

c. Bright colors 

d. Rounded corners 

. Which links can you represent as buttons? 

a. Media player and site content links 

b. Navigation links 

c. Any link other than links within blocks of text 

d. You can use buttons for any link. 


. How would you create text that reads down instead of across? 


a. Use the Warp Text option. 

b. Rotate the layer 90 degrees. 

c. Use the vertical orientation option. 

d. You cannot do this in Photoshop. 

. Which of the following are standard for text used in buttons? 
a. Italic, bold, uppercase, Arial 

b. Nonitalic, nonbold, lowercase, Times 

c. Italic, nonbold, uppercase, Times 

d. Nonitalic, bold, lowercase, Arial 

. Which of the following is not a reason to use text links instead of buttons? 
a. Saving bandwidth 

b. De-emphasizing links 

c. Keeping the page uncluttered 


d. You are not sure if readers have the proper fonts installed to display the 
buttons correctly. 


. When do you have to rasterize text? 
a. When using the Type Mask tool 

b. When you want to edit a text layer 
c. When you want to use filters 


d. When you want to apply layer styles 


290 Chapter 7 Creating and Using Buttons 


9, 


10. 


11. 


12. 


13: 


14. 


What is the difference between the Rectangular Marquee tool and the 
Rectangle tool? 


a. The Rectangular Marquee tool creates vectors, and the Rectangle tool 
creates paths. 


b. The Rectangular Marquee tool creates selection areas, and the Rectangle tool 
creates shapes. 


c. The Rectangular Marquee tool creates shapes, and the Rectangle tool 
creates vectors. 


d. There is no difference between the two. 

Which of the following formats can save path information? 
a. PSD only 

b. PSD, TIE and PS 

c. Any image format 

d. Most image formats, including GIF and JPG 

Which of the following tools quickly makes rectangles with rounded corners? 
a. Rectangular Marquee tool 

b. Elliptical Marquee tool 

c. Ellipse tool 

d. Rounded Rectangle tool 

How would you create a triangle with rounded corners? 


a. Use the Rounded Rectangle tool, set the number of sides to 3, and select 
Smooth Indents. 


b. Use the Polygon tool, set the number of sides to 3, and select Smooth Corners. 
c. Use the Polygon tool, set the number of sides to 3, and select Smooth Indents. 
d. Use the Ellipse tool, set the number of sides to 3, and select Indent Sides. 


Which gradient tool creates a spot of one color that fades to another color in cir- 
cles around the initial point? 


a. Linear Gradient tool 

b. Radial Gradient tool 

c. Angle Gradient tool 

d. Reflected Gradient tool 

What is the direction of a conventional light source? 
a. From the side 

b. From the upper-left 

c. From directly above 


d. From the upper-right 


15. 


16. 


17. 


18. 


19. 


20. 
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What is the z-axis? 

a. The width of a vector path 

b. The line around which 3-D objects are rotated 

c. The diagonal line between the x-axis and y-axis 

d. An imaginary line coming out of the screen 

Which of the following tools can create a highlight that fades to a shadow? 
a. Burn tool 

b. Paint Can tool 

c. Gradient tool 

d. Dodge tool 

How do you make a button link to another page? 

a. Add an SRC attribute to the IMG tag. 

b. Enclose the IMG tag with an anchor tag. 

c. It happens automatically. 

d. Place the button on both pages. 

How do you make a button open a new window? 

a. The button itself is no different; just change the anchor tag. 

b. The shape’s path needs to include JavaScript. 

c. You must create the button with a WYSIWYG HTML editor. 

d. Place the button on both pages to indicate to the browser which pages are linked. 
What sort of menu usually requires client-side scripting? 

a. Tabbed interface 

b. Hierarchical menu 

c. Side navigation 

d. Top navigation 

Which browsers support the use of graphics as form-submission buttons? 
a. Internet Explorer version 5 and later 

b. Internet Explorer version 4 and later 

c. Netscape Navigator and Internet Explorer, versions 4 and later 


d. All modern browsers 
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HANDS-ON PROJECTS 


Project 1: Create a 3-D E-Mail Button 


You have an e-mail link at the bottom of your Web page and you want to replace the 
text link with a stylized symbol. 


Complete these steps: 
1. Create an image that is 50 pixels wide and 50 pixels high. 
. Select the Type tool. 
. Set the Font to Arial and Bold. Set the font size to 36 points. 
. Click in the middle of the image and type the @ symbol. 


2 

3 

4 

5. Center the character with the Move tool. 

6. Click Layer on the menu bar, point to Layer Style, and then click Drop Shadow. 
7 


. In the Effects dialog box, Set the Blend mode to Multiply, the opacity to 75%, 
and the Angle to 12°. Set the Distance to 5 pixels, the Spread to 10%, and the 
Size to 5. Use the default settings for the other options. 


8. Select Bevel and Emboss from the menu in the Layer Style dialog box. 


9. Set both Opacity values to 100%, the Style to Inner Bevel, the Depth to 200% 
pixels, the Size to 5 pixels, and the Soften to 3 pixels. Click OK. 


10. Flatten all the layers. 


11. Select the Levels tool, and use it to set the Gamma to 1.5 (the center Input 
Levels text box). Click OK. 


12. With the Hue/Saturation tool, select Colorize, set the Hue to 240, and then 
click OK. 


13. Optimize the image and save it as e-mail.gif in a new folder named project_7-1. 


Project 2: Create a Faded Next Button 


You have complete navigational controls at the top of your Web page. The controls allow 
users to navigate between pages in a multipage article. You want to add a subtle rein- 
forcing link at the bottom. 


Complete these steps: 
1. Create an image that is 200 pixels wide and 100 pixels high. 
2. Create a second layer, and fill it with white. 


3. Select the Type tool and click the Create a mask or selection button in the 
Options bar. Set the Font to Arial, Bold and 30 points. 


4. Type Next-> in the new layer. Commit the text by clicking the Commit any 
current edits (check mark) button in the Options bar or by selecting another 
tool from the toolbox. 
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5. Center the selection. 
6. Click Select on the menu bar, and then click Inverse. 


7. Select the Airbrush tool and select a soft round brush with a diameter around 
65 pixels. Set the Pressure to 25%. Set the foreground color to black. Use the 
normal mode. 


8. Drag the pointer over the text to create a gray outline around the text. 


9. Click Layer on the menu bar, point to Layer Style, and then click Drop 
Shadow. Adjust the settings or use the default settings. The text should appear to 
be cut out of the image. 


10. Flatten the layers and trim the image. 


11. Optimize the image and save it as next.gif in a new folder named project_7-2. 


Project 3: Create a Beveled Next Button 


You do not have to use advanced features of Photoshop or ImageReady to create 3-D effects. 
You can create highlights and shading with basic tools found in any graphics program. 


Project 
Complete these steps: 
1. Create an image that is 60 pixels wide and 40 pixels high. 


2. Select the Line tool. In the options bar, select the Create filled region button, and 
set the Weight to 20 pixels. Deselect Anti-aliased if it is selected. 


3. In the Geometry options list, insert a check mark in the End check box for 
arrowheads. Set the Width and Length to 150%, and set the Concavity to 0%. 


4. Set the foreground color to a medium green (#00cc00) and draw an arrow from 
left to right across the image. Hold down the Shift key to keep the line horizontal. 


. Select the Pencil tool and use a brush that is 2 pixels in diameter. 
. Set the foreground color to a lighter green (#99ff99) and zoom in on the image. 


. Draw straight lines along the upper and left inner edges of the arrow. 
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. Set the foreground color to a darker green (#006600) and draw straight lines 
along the lower and right inner edges of the arrow. 


9. Blur the image with the Gaussian Blur filter, using a Radius of 0.7. 


10. Optimize the image and save it as next2.gif in a new folder named project_7-3. 
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Project 4: Create Two Buttons for a Web Jukebox 


You have a JavaScript-based audio player and need buttons to use in the interface. You 
will start with just the Play and Stop buttons as prototypes and create the other buttons 
later. You want the buttons to resemble the buttons on CD players as much as possible. 
Complete these steps: 

1. Create an image that is 60 pixels wide and 40 pixels high. 


2. Select the Gradient tool. In the options, choose Reflected Gradient. Set the 
Gradient to Foreground to Background. 


3. Set the background color to black and the foreground color to a grayish-blue 
(#666699). 


4. Move the pointer to the center of the image, hold down the Shift key, and drag 
the pointer to the bottom of the image. 


5. Create a second layer. 

6. Set the foreground color to red (#££0000) 

7. Select the Rectangle tool. In the Options bar, click Create filled region. 
8. Create a 15 X 15 pixel square centered in the left half of the new layer. 
9. Set the foreground color to green (#00cc00) 


10. Select the Polygon tool. In the Options bar, set the Sides to 3, click the 
Geometry options arrow, and set the Radius to 10. If Anti-Aliased is selected, 
deselect it. 


11. Create a triangle pointing toward the right and centered in the right half of the 
new layer. 


12. Click Layer on the menu bar, point to Layer Style, and then click Inner 
Shadow. In the dialog box that appears, set the Distance to 7 pixels and the 
Choke to 0%. Click OK. 


13. Flatten the image and save it as buttons.psd in a new folder named project_7-4. 
14. Select the Canvas tool and use it to crop the Stop button (square) at 30 pixels wide. 
15. Optimize the image and save it as stop. gif. 

16. Open buttons.psd again and crop the Play button (triangle) at 30 pixels wide. 
17. Optimize the image and save it as play. gif. 


Project 5: Create a Cartoon Button 


You are creating buttons for your top navigation bar to link to the content areas of your 
site. You want a cartoon look for the buttons. 


Complete these steps: 
1. Create an image that is 60 pixels wide and 60 pixels high. 
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2. Select the Rounded Rectangle tool. In the Options bar, click Create new 
shape layer. Set the Radius to 10. On the Style menu, click the style named 
Color Target (Button). Open the Rounded Rectangle Options menu and select 
Unconstrained. 


3. Drag the pointer over the image to create the button. 


4. In the Layers palette, expand the shape layer and double-click the style icon 
next to the words Drop Shadow to open the Layer Style dialog box. In the dialog 
box, change the distance to 10 pixels. 


5. Select the Direct Selection tool. Select each corner anchor tab to change the 
shape of the button. 


6. Flatten the image. Use the Levels dialog box to raise the black output level to 75. 


7. Using black, type Games! in the image. 
8. Click the Warp Text button in the Options bar to open the Warp Text dialog 
box. Set the style to Inflate. Set the Bend to 75%. 


9. Flatten the image, optimize, and save it as games.jpg in a new folder named 
project_7-5. 


Project 6: Create a Button with Emphasized Text 


Create a button in which the text appears to be lifted away from the textured 
background. 


Complete these steps: 
1. Create an image that is 120 pixels wide and 60 pixels high. 
2. Set the background color to blue and the foreground color to white. 
3. Run the Clouds filter. 
4. Select the Levels tool and set the black Output Level to 127. 
5 


. Select the Type tool and add a type mask of the word Reviews in a bold, 
24-point, Verdana font. 


6. Click Select on the menu bar, and then click Inverse. 
7. Normalize the contrast within the selected area. 
8. Select the Burn tool and darken the area around the text. 
9. Click Select on the menu bar, and then click Inverse. 
10. Normalize the contrast within the type mask. Copy the selection and paste it in 
a new layer. 
11. Add the Outer Glow style with the Layer Style dialog box. From the Contour 
menu, select the contour named Ring. 


12. Flatten the image, normalize contrast, optimize, and save it as reviews.jpg in a 
new folder named project_7-6. 
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Project 7: Create a Vertical Button 
Create a button that looks as though it is standing vertically on the page. 


Complete these steps: 


1. 


Create an image that is 120 pixels wide and 50 pixels high with a transparent 
background. 


. Select the Type tool and use it to add Gallery as a type mask in a new layer. 


Select a bold sans serif font, and select a size that fits within the shape. 


. Fill the text with the foreground color, blue (#0033CC). 
. Duplicate the layer. Select the bottom layer. 
. Click Edit on the menu bar, point to Transform, then click Skew. Reduce the 


height to about 80%, move the selection down so that the bottom edge of the 
selection is aligned with the bottom edge of the text in the other layer. Skew the 
selection horizontally by about [-30] degrees. 


. Click Image on the menu bar, point to Adjust, and then click Invert. 


. Set the foreground color to black. Select the Gradient tool. In the Options bar 


set the gradient to linear, from Foreground to Transparent. Create a gradient 
from bottom to top of the selection. Make sure that transparency is locked. 


. Raise the Gamma to 2. 


. Flatten the image, optimize, and save it as gallery. gif in a new folder named 


project_7-7. 


Project 8: Create Another Standard Button 


Create a standard button to use in a navigation bar. 


Complete these steps: 


1. 


Create an image that is 120 pixels wide and 35 pixels high with a transparent 
background. 


. Select the Rounded Rectangle tool. Set the Radius to 10. Set the layer style 


to none. 


. Create a white-filled region 100 pixels wide and 20 pixels high. 
. Add every possible layer style except Texture and Stroke. Use default settings or 


experiment with the various features. 


. Save the image as button.psd in a new folder named project_7-8. 


. Use this image as a basis for several navigation buttons. Use text of a complimen- 


tary color over the button to create buttons with the words: Store, Reference, 
and Help. 
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7. Adjust the color of the base button so that the hue is slightly different and the 
saturation is reduced. Use text of a complimentary color to create buttons with 
the words: Books, Music, Glossary, FAQ, Phone #s, and Guide. 


8. Optimize and save all of these images in the project_7-8 folder. 
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10 buttons. Four or five of the buttons are category headings that contain subcategories. 
The category buttons should be distinct from the subcategory buttons. Create 3-D but- 
tons for each link on the bar. 


A| Create a navigation bar for your site. This bar should be a vertical column of at least 


Create navigation buttons for your site that communicate their purpose without using 
words. The buttons should convey the concepts of Back, Next, and Home, among oth- 
ers. The buttons also should share a common design. 


